<template>
	<div class="menu_auth_button">
		<div class="header">
			<h2>权限按钮</h2>
			<el-button size="small" type="primary">新增</el-button>
		</div>
		<div class="content">
			<div class="item">
				<h3>123123</h3>
				<el-button-group>
					<el-button type="text" @click="handleEditMenu(item)">编辑</el-button>
					<el-button type="text" @click="handledeleteMenu(item)">删除</el-button>
				</el-button-group>
			</div>
			<template v-if="list.length === 0"></template>
			<template v-else></template>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		list: { type: Array, default: () => [] }
	},
	data() {
		return {
			buttonList: []
		};
	}
};
</script>

<style lang="scss" scoped>
.menu_auth_button {
	display: flex;
	flex-direction: column;
	border-left: solid 1px #e4e7ed;
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 32px;
		padding: 16px;
		flex-shrink: 0;
		border-bottom: solid 1px #e4e7ed;
		h2 {
			font-size: 16px;
			font-weight: normal;
		}
	}
	.content {
		flex: 1;
		padding: 8px 16px;
		overflow: auto;
	}
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 36px;
		h3 {
			font-size: 14px;
			font-weight: normal;
		}
		.el-button {
			padding: 10px 0;
			margin-left: 10px;
		}
	}
}
</style>
